<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外访人员管理</title>
    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="../js/jquery.min.js"></script>
    <style>
        /*设置背景*/
        body{
            background-color: #eff6f6;
        }
        .td_left{
            width: 300px;
            height:20px;
            text-align: right;
            padding-top: 10px;
        }
        /*表格样式*/
        #tab_three_table{
            width: 1000px;
            font-size: 15px;
            margin: auto;
            margin-top: 40px;
        }
        tr{
            height: 50px;
        }
        /*分页条数信息*/
        .page_num_inf{
            font-size: 25px;
            width: 300px;
            height: 20px;
            margin-bottom: 10px;
            margin-top: 50px;
            margin-left: 300px;
        }
        .page_num_inf span {
            color: #ff4848;
        }
        /*分页按钮*/
        #pagina{
            margin-top: 5px;
            margin-left: 300px;
        }
        #pagina li a{
            width: 100px;
            font-size: 20px;
            text-align: center;
        }
        /*当前页按钮颜色改变*/
        .curPage{
            color: #00ffe1;
        }
    </style>
    <script>

        //当页面一加载就调用查询方法
        $(function () {
            queryStranger(null,1)
        });

        //发送ajax请求的查询方法
        function queryStranger(sname,page) {
            console.log(sname);
            $.post("tea/queryStranger",{"sname":sname,"page":page},function (data) {
                //字符串拼接
                var str = '<tr class="info">\n' +
                    '            <th>身份证号码</th>\n' +
                    '            <th>姓名</th>\n' +
                    '            <th>访问楼栋</th>\n' +
                    '            <th>访问房间号</th>\n' +
                    '            <th>访问原因</th>\n' +
                    '            <th>访问日期</th>\n' +
                    '        </tr>';
                //遍历后台响应的list集合
                for (var i = 0; i < data.list.length; i++) {
                    if (i%2==0){
                        str += '<tr class="active">\n' +
                            '            <td>'+data.list[i].id_number+'</td>\n' +
                            '            <td>'+data.list[i].sname+'</td>\n' +
                            '            <td>'+data.list[i].building+'</td>\n' +
                            '            <td>'+data.list[i].room+'</td>\n' +
                            '            <td>'+data.list[i].cause+'</td>\n' +
                            '            <td>'+data.list[i].sdate+'</td>\n' +
                            '        </tr>';
                    }else{
                        str += '<tr class="info">\n' +
                            '            <td>'+data.list[i].id_number+'</td>\n' +
                            '            <td>'+data.list[i].sname+'</td>\n' +
                            '            <td>'+data.list[i].building+'</td>\n' +
                            '            <td>'+data.list[i].room+'</td>\n' +
                            '            <td>'+data.list[i].cause+'</td>\n' +
                            '            <td>'+data.list[i].sdate+'</td>\n' +
                            '        </tr>';
                    }
                }
                //放入table标签体中
                $("#tab_three_table").html(str);

                //设置共多少页多少条数据
                $("#allPage").html(data.totalPage);
                $("#allCount").html(data.totalCount);

                //设置分页按钮
                var begin=page-2;
                var end = page+2;
                if (data.totalPage < 5){
                    begin = 1;
                    end = data.totalPage+1;
                }
                if (begin < 1){
                    begin = 1;
                    end = begin+4;
                }
                if (end > data.totalPage+1){
                    end = data.totalPage;
                    begin = end-4;
                }
                //字符串拼接
                //首页
                var str_li = '<li onclick="queryStranger(\''+sname+'\','+1+')"><a href="#">首页</a></li>';
                //上一页
                if (page == 1){
                    str_li += '<li onclick="queryStranger(\''+sname+'\','+1+')"><a href="#">上一页</a></li>';
                }else{
                    str_li += '<li onclick="queryStranger(\''+sname+'\','+(page-1)+')"><a href="#">上一页</a></li>';
                }
                //中间按钮
                for (var i = begin; i < end; i++) {
                    //判断是否是当前页
                    if (i == page){
                        str_li += '<li onclick="queryStranger(\''+sname+'\','+i+')"><a href="#"><div class="curPage">'+i+'</div></a></li>';
                    }else {
                        str_li += '<li onclick="queryStranger(\''+sname+'\','+i+')"><a href="#">'+i+'</a></li>';
                    }

                }
                //下一页按钮
                if (page == data.totalPage){
                    str_li += '<li onclick="queryStranger(\''+sname+'\','+data.totalPage+')"><a href="#">下一页</a></li>';
                }else{
                    str_li += '<li onclick="queryStranger(\''+sname+'\','+(page+1)+')"><a href="#">下一页</a></li>';
                }
                //尾页
                str_li += '<li onclick="queryStranger(\''+sname+'\','+data.totalPage+')"><a href="#">尾页</a></li>';
                //将拼接好的字符串放入ul标签体中
                $("#pagina").html(str_li);
            },"json");
        }
    </script>
</head>
<body>
    <h2 style="margin-left: 50px">搜索框中可以按照姓名查询某位外访人的信息</h2>

    <span ><label for="stranger_name" class="td_left">姓名</label></span>
    <span><input type="text" name="stranger_name" id="stranger_name" placeholder="请输入外访人员的姓名"></span>
    <span><button style="margin-left: 50px;width: 70px" class="btn btn-info" id="but_stranger_name" onclick="queryStranger($('#stranger_name').val(),1)">搜索</button></span>
    <span><a href="add_stranger.html" style="margin-left: 500px;width: 120px" class="btn btn-info">添加外访人员</a></span>

    <table class="table table-hover" id="tab_three_table">
        <tr class="info">
            <th>身份证号码</th>
            <th>姓名</th>
            <th>访问楼栋</th>
            <th>访问房间号</th>
            <th>访问原因</th>
            <th>访问日期</th>
        </tr>
<!--        <tr class="active">-->
<!--            <td>XXXXXXXXXXXXXXXX</td>-->
<!--            <td>张三</td>-->
<!--            <td>61</td>-->
<!--            <td>201</td>-->
<!--            <td>XXXXXXXXXXXXXXXXXXXXXXXXXX</td>-->
<!--            <td>XXXXXXXXXX</td>-->
<!--        </tr>-->

<!--        <tr class="info">-->
<!--            <td>XXXXXXXXXXXXXXXX</td>-->
<!--            <td>张三</td>-->
<!--            <td>61</td>-->
<!--            <td>201</td>-->
<!--            <td>XXXXXXXXXXXXXXXXXXXXXXXXXX</td>-->
<!--            <td>XXXXXXXXXX</td>-->
<!--        </tr>-->
    </table>
    <div style="float: right;margin-right: 50px">
        <a href="tea_main_page.html" class="btn btn-info">返回主界面</a>
    </div>
    <!-- 分页按钮 -->
    <div>
        <div class="page_num_inf">
            <i></i> 共
            <span id="allPage">12</span>页，共<span id="allCount">132</span>条外访记录
        </div>
        <ul class="pagination" id="pagina">
            <li><a href="#">首页</a></li>
            <li><a href="#">上一页</a></li>
            <li><a href="#">1</a></li>
            <li ><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">下一页</a></li>
            <li><a href="#">尾页</a></li>
        </ul>
    </div>
</body>
</html>